NativeScript Vue — Grid and Stack Layouts

Vue is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript Vue.

Grid and Star Sizing

We can create a grid with star sizing to set the grid size proportionally for child elements.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
      <Label text="0,0" row="0" col="0" backgroundColor="red" />
      <Label text="0,1" row="0" col="1" backgroundColor="green" />
      <Label text="1,0" row="1" col="0" backgroundColor="blue" />
      <Label text="1,1" row="1" col="1" backgroundColor="yellow" />
    </GridLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the column to 1/3 and 2/3 of the width of the screen respectively.

And we set the row to 3/5 and 3/5 of the height of the screen respectively.

We can set the grid layout to fixed or auto-sizing.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
      <Label text="0,0" row="0" col="0" backgroundColor="red" />
      <Label text="0,1" row="0" col="1" backgroundColor="green" />
      <Label text="1,0" row="1" col="0" backgroundColor="blue" />
      <Label text="1,1" row="1" col="1" backgroundColor="yellow" />
    </GridLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the width of the 2nd column to auto so it’s sized to fit the content.

Also, we can set the grid layout with mixed sizing and merge cells.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <GridLayout
      columns="40, auto, *"
      rows="40, auto, *"
      backgroundColor="#3c495e"
    >
      <Label text="0,0" row="0" col="0" backgroundColor="red" />
      <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="green" />
      <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="blue" />
      <Label text="1,1" row="1" col="1" backgroundColor="yellow" />
      <Label text="1,2" row="1" col="2" backgroundColor="lightred" />
      <Label text="2,1" row="2" col="1" backgroundColor="lightgreen" />
      <Label text="2,2" row="2" col="2" backgroundColor="lightblue" />
    </GridLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the colSpan and rowSpan props to merge columns and rows.

And we set the columns and rows prop to set the row and column sizes.

StackLayout

The StacjLayout component lets us add components and display them as a column.

For example, we can write:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <StackLayout backgroundColor="#3c495e">
      <Label text="first" height="70" backgroundColor="red" />
      <Label text="second" height="70" backgroundColor="green" />
      <Label text="third" height="70" backgroundColor="blue" />
    </StackLayout>
  </Page>
</template>

<script >
export default {};
</script>

to add the Label s and display them in a column.

We can also display the components inside the layout by changing the orientation prop:

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!" />
    <StackLayout orientation="horizontal" backgroundColor="#3c495e">
      <Label text="first" width="70" backgroundColor="red" />
      <Label text="second" width="70" backgroundColor="green" />
      <Label text="third" width="70" backgroundColor="blue" />
    </StackLayout>
  </Page>
</template>

<script >
export default {};
</script>

We set the orientation prop to 'horizontal' to set the Label s to display the Labels side by side.

Conclusion

We can add grid layouts and stack layouts with NativeScript Vue.